import React, {Component} from 'react';

class Count extends Component {
  increment = () => {
    const {value} = this.selectedNum
    this.props.add(value * 1)
  }
  decrement = () => {
    const {value} = this.selectedNum
    this.props.minus(value * 1)
  }
  incrementIfOdd = () => {
    const {num, add} = this.props
    if (num % 2) {
      const {value} = this.selectedNum
      add(value * 1)
    }
  }
  incrementAsync = () => {
    const {value} = this.selectedNum
    this.props.addAsync(value * 1, 1000)
  }

  render() {
    const {num} = this.props
    return (
      <div>
        <h1>当前求和为: {num}</h1>
        <hr/>
        <select name="count" id="count" ref={c => this.selectedNum = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <button onClick={this.increment}>increment</button>
        <button onClick={this.decrement}>decrement</button>
        <button onClick={this.incrementIfOdd}>incrementIfOdd</button>
        <button onClick={this.incrementAsync}>incrementAsync</button>
      </div>
    );
  }
}

export default Count;
